<style lang="scss" scoped>
.custom-config {
  ::v-deep {
    .ivu-tabs-nav-scroll {
      display: flex;
      justify-content: center;
    }
    .ivu-tabs .ivu-tabs-tabpane {
      text-align: start;
      padding: 0 30px;
      color: #fff;
    }
  }
}
</style>

<template>
  <div class="custom-config">
    <Tabs value="name1">
      <TabPane label="页面布局" name="name1">
        <Form :model="layoutConfigs" label-position="top">
          <FormItem :label="dis[item]" v-for="item in Object.keys(layoutConfigs)" :key="item">
            <InputNumber
              v-if="isNumber(layoutConfigs[item])"
              :max="item == 'rows_split_num' ? 100 : layoutConfigs['rows_split_num']"
              :min="item == 'rows_split_num' ? 6 : 1"
              v-model="layoutConfigs[item]"
            ></InputNumber>

            <Input v-else v-model="layoutConfigs[item]"></Input>
          </FormItem>
        </Form>
      </TabPane>
      <TabPane label="组件配置" name="name2">标签二的内容</TabPane>
      <TabPane label="高级" name="name3">标签三的内容</TabPane>
    </Tabs>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { isNumber } from "lodash";
import { filedTitle } from "./config";
export default {
  name: "custom-config",
  props: {
    config: {
      type: Object,
      default: () => {},
    },
    editInfo: {
      type: Object,
    },
  },
  computed: {
    ...mapGetters({
      layoutConfigs: "layout/layoutConfigs",
    }),
  },
  data() {
    return {
      name1: "",
      dis: filedTitle,
    };
  },
  watch: {
    editInfo: {
      handler(val) {
        console.log("editInfo发生变化", val, this.config);
        if (val.slotKey && val.editDragId) {
          console.log("区域", this.config[val.slotKey]);
          console.log(
            "组件",
            this.config[val.slotKey].data.find((v) => v.id == val.editDragId)
          );
        }
      },
      deep: true,
    },
  },
  methods: {
    isNumber: isNumber,
  },
};
</script>
